<template>
  <div class="team">
    <div class="teamtitle">
      <h1>专家库——专家助您成功</h1>
    </div>
    <div class="person">
      <div class="container" v-for="(item,index) in imgList" :key="index">
        <el-image class="img" fit="cover" :src="item.imgUrl"></el-image>
        <div class="imgdesc">
          <div class="name">{{item.name}}<span style="padding-left:15px;color:#909399">{{item.job}}</span></div>
          <div>123</div>
        </div>
        <div class="mask" v-show='false'></div>
      </div>
    </div>
    <div>
      <router-link to='/expert'>
        <a>查看更多<i class="el-icon-d-arrow-right"></i></a>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeTeam',
  data () {
    return {
      imgList: []
    }
  },
  methods: {
    getExpert () {
      this.$axios({
        method: 'get',
        url: '/expert/select?page=1&pageSize=4'
      }).then((res) => {
        this.imgList = res.data.data.rows
      })
    }
  },
  mounted () {
    this.getExpert()
  }
}
</script>

<style scoped>
.team {
  padding: 20px 0;
  background: white;
  text-align: center;
}
.teamtitle {
  font-family: "Hiragino Sans GB";
  font-size: 44px;
  text-align: center;
  padding-top: 100px;
}
.person {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  overflow: hidden;
  padding: 50px 200px 0 200px;
}
.img {
  width: 225px;
  height: 300px;
  border-radius: 2px;
}
.imgdesc {
  display: inline-block;
  width: 225px;
  height: 50px;
  background: #eeeeee;
  overflow: hidden;
  box-shadow: 0 2px 10px 0 rgba(31, 56, 88, 0.15);
}
.name {
  font-size: 16px;
  line-height: 20px;
  padding: 15px 10px;
}
.container {
  width: 225px;
  height: 400px;
  margin: 0 10px 25px 10px;
}
.mask {
  position: absolute;
  background: black;
  top: 0;
  left: 0;
  opacity: 0.5;
  z-index: 99;
  width: 225px;
  height: 300px;
}
a {
  text-decoration: none;
  font-size: 18px;
  color: #002854;
}
</style>
